<template>
  <div class="container">
    <div class="forms">
      <div class="block">
        <div class="header">基础配置</div>
        <el-form
          ref="detailForm"
          label-position="left"
          label-width="120px"
          :rules="rules"
          :model="form"
        >
          <el-form-item label="网站标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入网站标题"
              :maxlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item label="网站Logo">
            <CImgUpload
              :path="form.titleLogo"
              :actionUrl="actionUrl"
              @uploadSuccess="handelUpLoadSuccess('titleLogo',$event)"
              :beforeUpload="onBeforeUpload('titleLogo')"
              @remove="handlePosterRemove('titleLogo')"
            >
              <template #tip> 只能上传jpg、jpeg、png、bmp、svg格式 </template>
            </CImgUpload>
          </el-form-item>
          <el-form-item label="平台首页名称" prop="searchTitle">
            <el-input
              v-model="form.searchTitle"
              placeholder="请输入平台首页名称"
              :maxlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item label="网页标题" prop="webTitle">
            <el-input
              v-model="form.webTitle"
              placeholder="请输入网页标题"
              :maxlength="20"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="block">
        <div class="header">个性化配置</div>
        <el-form ref="form2" label-position="left" label-width="120px">
          <el-form-item label="登录页背景">
            <CImgUpload
              :path="form.loginBg"
              :actionUrl="actionUrl"
              @uploadSuccess="handelUpLoadSuccess('loginBg',$event)"
              :beforeUpload="onBeforeUpload('loginBg')"
              @remove="handlePosterRemove('loginBg')"
            >
              <template #tip>
                只能上传jpg、jpeg、png、bmp、svg格式,尺寸1108 × 1072 px
              </template>
            </CImgUpload>
          </el-form-item>
          <el-form-item label="顶部导航背景">
            <CImgUpload
              :path="form.topBg"
              :actionUrl="actionUrl"
              @uploadSuccess="handelUpLoadSuccess('topBg',$event)"
              :beforeUpload="onBeforeUpload('topBg')"
              @remove="handlePosterRemove('topBg')"
            >
              <template #tip>
                只能上传jpg、jpeg、png、bmp、svg格式，尺寸1920 × 72 px
              </template>
            </CImgUpload>
          </el-form-item>
          <el-form-item label="平台首页背景">
            <CImgUpload
              :path="form.searchBg"
              :actionUrl="actionUrl"
              @uploadSuccess="handelUpLoadSuccess('searchBg',$event)"
              :beforeUpload="onBeforeUpload('searchBg')"
              @remove="handlePosterRemove('searchBg')"
            >
              <template #tip>
                只能上传jpg、jpeg、png、bmp、svg格式，尺寸1920 x 539 px
              </template>
            </CImgUpload>
          </el-form-item>
          <el-form-item label="网站版权信息" prop="copyright">
            <el-input
              v-model="form.copyright"
              placeholder="请输入网页标题"
              :maxlength="100"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btns">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button plain type="primary" @click="getData">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { basePath } from "@/utils/request";
import { detail, edit } from "@/api/system-config/platform";
import { vaildateInput } from "@/utils/validate";
import CImgUpload from "@/components/Upload/CImgUpload";
export default {
  name: "platform",
  data() {
    return {
      form: {},
      filePath,
      actionUrl: basePath + "setting/file",
      rules: {
        title: [
          { required: true, message: "网站标题不能为空" },
          { validator: vaildateInput, trigger: ["blur", "change"] },
        ],
        searchTitle: [
          { required: true, message: "平台首页名称不能为空" },
          { validator: vaildateInput, trigger: ["blur", "change"] },
        ],
        webTitle: [
          { required: true, message: "网页标题不能为空" },
          { validator: vaildateInput, trigger: ["blur", "change"] },
        ],
        copyright: [{ required: true, message: "网站版权信息不能为空" }],
      },
    };
  },
  components: {
    CImgUpload,
  },
  computed: {
    headers() {
      let token = getToken();
      return token ? { Authorization: token } : {};
    },
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      detail().then((res) => {
        this.form = res.data;
      });
    },
    saveData() {
      this.$refs.detailForm.validate((valid) => {
        if (valid) {
          edit(this.form).then((res) => {
            this.$message.success("保存成功");
          });
        }
      });
    },
    onBeforeUpload(key) {
      return (...arg) => this.handelBeforeUpload(key, ...arg);
    },
    handlePosterRemove(key) {
      this.form[key] = "";
    },
    handleError() {
      this.$message.closeAll();
      this.$message.error("文件上传失败，请重试");
    },
    handelUpLoadSuccess(key, res, file, fileList) {
      console.log(key, res, file, fileList);
      if (!!res.code) {
        this.handleError(res);
      } else {
        this.$set(this.form, key, res.data);
      }
    },
    handelBeforeUpload(key, file) {
      console.log(key, file);
      if (!file) return;
      // 允许上传的文件格式列表
      let acceptList = ["jpg", "jpeg", "png", "bmp", "svg"];
      // 根据文件名获取文件的后缀名
      let fileType = file.name.split(".").pop().toLowerCase();
      // 判断文件格式是否符合要求
      if (acceptList.indexOf(fileType) === -1) {
        this.$message.error(
          "请按照提示上传文件，不能上传 " + fileType + " 格式!"
        );
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 18px 24px;
  background-color: #fff;
  min-height: 100%;
}
.forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.block {
  .header {
    font-size: 18px;
    font-weight: 600;
    color: #2d2d2d;
    line-height: 19px;
    height: 27px;
    margin-bottom: 20px;
  }
}
.btns {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
img {
  object-fit: contain;
}
// :deep(.el-upload-dragger ){
//   background-color: #d9d9d9;
// }
</style>
